<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问答详情 - 职场社交</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #2563eb;
            --primary-light: #eff6ff;
            --primary-dark: #1d4ed8;
            --secondary: #64748b;
            --dark: #1e293b;
            --light: #f8fafc;
            --border: #e2e8f0;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            --card-shadow-hover: 0 10px 20px rgba(0, 0, 0, 0.08);
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: var(--light);
            color: var(--dark);
            line-height: 1.6;
            padding-top: 20px;
            padding-bottom: 40px;
        }
        
        .container {
            max-width: 1140px;
        }
        
        /* 导航栏样式 */
        .navbar {
            background-color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            padding: 0.75rem 0;
            margin-bottom: 2rem;
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        /* 内容卡片样式 */
        .content-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--card-shadow);
            overflow: hidden;
            margin-bottom: 1.5rem;
        }
        
        .content-header {
            padding: 1.5rem;
            border-bottom: 1px solid var(--border);
        }
        
        .content-body {
            padding: 1.5rem;
        }
        
        .content-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .content-title {
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--dark);
            line-height: 1.4;
        }
        
        .content-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            font-size: 0.9rem;
            color: var(--secondary);
            margin-bottom: 1.5rem;
        }
        
        .content-creator {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .content-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .creator-name {
            font-weight: 500;
            color: var(--dark);
        }
        
        /* 问题内容样式 */
        .question-content {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 1.5rem;
        }
        
        .question-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }
        
        .question-tag {
            padding: 0.35rem 0.85rem;
            background-color: var(--primary-light);
            color: var(--primary);
            border-radius: 4px;
            font-size: 0.85rem;
        }
        
        /* 操作按钮样式 */
        .action-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.2s;
            border: none;
            cursor: pointer;
        }
        
        .btn-primary {
            background-color: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: var(--primary-dark);
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--border);
            color: var(--secondary);
        }
        
        .btn-outline:hover {
            border-color: var(--primary);
            color: var(--primary);
            background-color: var(--primary-light);
        }
        
        /* 回答区域样式 */
        .answers-section {
            margin-top: 2.5rem;
        }
        
        .answers-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .answers-count {
            font-size: 1.25rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .answers-sort {
            font-size: 0.9rem;
        }
        
        /* 回答项样式 */
        .answer-item {
            padding: 1.5rem;
            border-bottom: 1px solid var(--border);
        }
        
        .answer-item:last-child {
            border-bottom: none;
        }
        
        .answer-meta {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
        }
        
        .answer-content {
            font-size: 1.05rem;
            line-height: 1.7;
            margin-bottom: 1.25rem;
        }
        
        .answer-actions {
            display: flex;
            gap: 1.5rem;
            font-size: 0.9rem;
        }
        
        .answer-action {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            color: var(--secondary);
            cursor: pointer;
            transition: color 0.2s;
        }
        
        .answer-action:hover {
            color: var(--primary);
        }
        
        .answer-action.voted {
            color: var(--primary);
            font-weight: 500;
        }
        
        /* 回复区域样式 */
        .replies-section {
            margin-top: 1rem;
            padding-left: 2rem;
        }
        
        .reply-item {
            padding: 1rem 0;
            border-bottom: 1px solid var(--border);
        }
        
        .reply-item:last-child {
            border-bottom: none;
        }
        
        .reply-meta {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }
        
        .reply-content {
            font-size: 0.95rem;
            margin-bottom: 0.75rem;
        }
        
        .reply-actions {
            display: flex;
            gap: 1.25rem;
            font-size: 0.85rem;
        }
        
        .show-replies {
            color: var(--primary);
            font-size: 0.9rem;
            margin-top: 0.75rem;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        /* 回答输入框样式 */
        .answer-input-section {
            margin-top: 2rem;
        }
        
        .answer-input-header {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        
        .answer-textarea {
            width: 100%;
            min-height: 150px;
            padding: 1rem;
            border: 1px solid var(--border);
            border-radius: 8px;
            resize: vertical;
            font-family: inherit;
            font-size: 1rem;
            margin-bottom: 1rem;
        }
        
        .answer-textarea:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }
        
        .submit-answer {
            display: flex;
            justify-content: flex-end;
        }
        
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .content-title {
                font-size: 1.5rem;
            }
            
            .content-meta {
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .action-buttons {
                gap: 0.75rem;
            }
            
            .action-btn {
                padding: 0.4rem 0.8rem;
                font-size: 0.9rem;
            }
            
            .answers-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }
            
            .replies-section {
                padding-left: 1rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-comments"></i>
                职场社交
            </a>
            
            <div class="d-flex align-items-center gap-4">
                <a href="#" class="text-secondary" title="首页">
                    <i class="fas fa-home"></i>
                </a>
                <a href="#" class="text-secondary" title="消息">
                    <i class="fas fa-bell"></i>
                </a>
                <a href="#" class="text-secondary" title="个人中心">
                    <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="content-avatar">
                </a>
            </div>
        </div>
    </nav>
    
    <div class="container">
        <!-- 问题详情卡片 -->
        <div class="content-card">
            <div class="content-body">
                <h1 class="content-title">如何有效提升大型React应用的性能？有哪些实用技巧？</h1>
                
                <div class="content-meta">
                    <div class="content-creator">
                        <img src="https://picsum.photos/100/100?random=80" alt="刘开发" class="content-avatar">
                        <div>
                            <span class="creator-name">刘开发</span>
                            <div>前端技术专家 @ 科技公司</div>
                        </div>
                    </div>
                    
                    <div>
                        <i class="far fa-clock"></i> 发布于 2023-06-10
                    </div>
                    
                    <div>
                        <i class="fas fa-folder"></i> 前端开发
                    </div>
                    
                    <div>
                        <i class="far fa-eye"></i> 1.2k 次浏览
                    </div>
                </div>
                
                <div class="question-content">
                    我们团队正在开发一个大型React应用，随着功能增加，性能问题越来越明显，特别是在组件渲染和状态管理方面。应用中包含大量动态数据和复杂交互，在低配置设备上经常出现卡顿现象。<br><br>
                    请问有哪些经过实践验证的性能优化技巧？特别是在以下几个方面：<br>
                    1. 组件渲染优化<br>
                    2. 状态管理优化<br>
                    3. 大数据列表处理<br>
                    4. 资源加载优化<br>
                    <br>
                    希望能分享一些具体的实现方案和最佳实践，非常感谢！
                </div>
                
                <div class="question-tags">
                    <span class="question-tag">React</span>
                    <span class="question-tag">性能优化</span>
                    <span class="question-tag">前端开发</span>
                    <span class="question-tag">大型应用</span>
                </div>
                
                <div class="action-buttons">
                    <button class="action-btn btn-primary">
                        <i class="fas fa-pencil-alt"></i> 回答问题
                    </button>
                    <button class="action-btn btn-outline" id="like-btn">
                        <i class="far fa-thumbs-up"></i> 赞同 (42)
                    </button>
                    <button class="action-btn btn-outline">
                        <i class="far fa-bookmark"></i> 收藏
                    </button>
                    <button class="action-btn btn-outline">
                        <i class="fas fa-share-alt"></i> 分享
                    </button>
                    <button class="action-btn btn-outline">
                        <i class="fas fa-flag"></i> 举报
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 回答列表区域 -->
        <div class="content-card answers-section">
            <div class="content-header">
                <div class="answers-header">
                    <div class="answers-count">
                        <i class="fas fa-comment"></i> 8个回答
                    </div>
                    <div class="answers-sort">
                        排序方式: 
                        <select class="form-select form-select-sm d-inline-block" style="width: auto; display: inline-block;">
                            <option value="votes">按赞同数</option>
                            <option value="newest">按最新</option>
                            <option value="oldest">按最早</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <!-- 回答1 -->
            <div class="answer-item">
                <div class="answer-meta">
                    <div class="content-creator">
                        <img src="https://picsum.photos/100/100?random=82" alt="张技术" class="content-avatar">
                        <div>
                            <span class="creator-name">张技术</span>
                            <div>资深前端工程师 @ 互联网公司</div>
                        </div>
                    </div>
                    <div class="text-secondary" style="font-size: 0.9rem;">
                        3天前
                    </div>
                </div>
                
                <div class="answer-content">
                    大型React应用的性能优化是一个系统性的工作，我结合实际项目经验分享几个关键点：<br><br>
                    
                    <strong>1. 组件渲染优化</strong><br>
                    - 使用React.memo()包装纯组件，避免不必要的重渲染<br>
                    - 合理使用useCallback和useMemo缓存函数和计算结果<br>
                    - 拆分大型组件为小型专注组件，缩小重渲染范围<br><br>
                    
                    <strong>2. 状态管理优化</strong><br>
                    - 状态局部化，避免将所有状态放在顶层<br>
                    - 考虑使用Recoil或Jotai等新型状态管理库，实现更精细的状态控制<br>
                    - 对于大型列表，考虑将状态下放到列表项组件<br><br>
                    
                    <strong>3. 大数据列表处理</strong><br>
                    - 实现虚拟列表（推荐react-window或react-virtualized）<br>
                    - 列表项懒加载和按需渲染<br>
                    - 分页加载而非一次性加载所有数据<br><br>
                    
                    我们团队的项目通过这些优化，将初始加载时间减少了60%，交互响应速度提升了约70%。
                </div>
                
                <div class="answer-actions">
                    <div class="answer-action" id="answer-like-1">
                        <i class="far fa-thumbs-up"></i> 赞同 (28)
                    </div>
                    <div class="answer-action">
                        <i class="far fa-comment"></i> 回复
                    </div>
                    <div class="answer-action">
                        <i class="fas fa-share-alt"></i> 分享
                    </div>
                    <div class="answer-action">
                        <i class="fas fa-flag"></i> 举报
                    </div>
                </div>
                
                <!-- 回复区域 -->
                <div class="replies-section">
                    <div class="reply-item">
                        <div class="reply-meta">
                            <div class="content-creator">
                                <img src="https://picsum.photos/100/100?random=80" alt="刘开发" class="content-avatar" style="width: 32px; height: 32px;">
                                <span class="creator-name">刘开发</span>
                            </div>
                            <div class="text-secondary">
                                2天前
                            </div>
                        </div>
                        
                        <div class="reply-content">
                            感谢分享！请问你们在实现虚拟列表时，有没有遇到过列表项高度不固定的问题？是如何解决的？
                        </div>
                        
                        <div class="reply-actions">
                            <div class="answer-action">
                                <i class="far fa-thumbs-up"></i> 赞同 (3)
                            </div>
                            <div class="answer-action">
                                <i class="far fa-comment"></i> 回复
                            </div>
                        </div>
                    </div>
                    
                    <div class="reply-item">
                        <div class="reply-meta">
                            <div class="content-creator">
                                <img src="https://picsum.photos/100/100?random=82" alt="张技术" class="content-avatar" style="width: 32px; height: 32px;">
                                <span class="creator-name">张技术</span>
                            </div>
                            <div class="text-secondary">
                                1天前
                            </div>
                        </div>
                        
                        <div class="reply-content">
                            @刘开发 我们确实遇到过这个问题，解决方案是使用react-window的VariableSizeList组件，通过estimateSize属性提供一个高度估计函数，然后在实际渲染时测量真实高度并缓存起来。
                        </div>
                        
                        <div class="reply-actions">
                            <div class="answer-action">
                                <i class="far fa-thumbs-up"></i> 赞同 (5)
                            </div>
                            <div class="answer-action">
                                <i class="far fa-comment"></i> 回复
                            </div>
                        </div>
                    </div>
                    
                    <div class="show-replies">
                        <i class="fas fa-plus"></i> 查看更多3条回复
                    </div>
                </div>
            </div>
            
            <!-- 回答2 -->
            <div class="answer-item">
                <div class="answer-meta">
                    <div class="content-creator">
                        <img src="https://picsum.photos/100/100?random=83" alt="王架构" class="content-avatar">
                        <div>
                            <span class="creator-name">王架构</span>
                            <div>前端架构师 @ 科技企业</div>
                        </div>
                    </div>
                    <div class="text-secondary" style="font-size: 0.9rem;">
                        2天前
                    </div>
                </div>
                
                <div class="answer-content">
                    补充一些资源加载和代码分割方面的优化技巧：<br><br>
                    
                    1. <strong>路由级别的代码分割</strong>：使用React.lazy和Suspense实现按需加载路由组件<br>
                    <pre style="background: #f8fafc; padding: 1rem; border-radius: 6px; font-size: 0.9rem; overflow-x: auto;">
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));

function App() {
  return (
    <Router>
      <Suspense fallback={<Spinner />}>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Suspense>
    </Router>
  );
}</pre><br>
                    
                    2. <strong>组件级别的动态导入</strong>：对于大型组件（如下拉菜单、模态框），可以在需要时才加载<br>
                    
                    3. <strong>图片和资源优化</strong>：<br>
                    - 使用WebP格式图片并提供降级方案<br>
                    - 实现图片懒加载（使用IntersectionObserver API）<br>
                    - 合理设置图片尺寸，避免过大图片<br><br>
                    
                    这些方法可以显著减少初始加载时间，提升用户体验。
                </div>
                
                <div class="answer-actions">
                    <div class="answer-action" id="answer-like-2">
                        <i class="far fa-thumbs-up"></i> 赞同 (19)
                    </div>
                    <div class="answer-action">
                        <i class="far fa-comment"></i> 回复
                    </div>
                    <div class="answer-action">
                        <i class="fas fa-share-alt"></i> 分享
                    </div>
                    <div class="answer-action">
                        <i class="fas fa-flag"></i> 举报
                    </div>
                </div>
                
                <!-- 回复区域 -->
                <div class="replies-section">
                    <div class="show-replies">
                        <i class="fas fa-plus"></i> 查看全部2条回复
                    </div>
                </div>
            </div>
            
            <!-- 回答3 -->
            <div class="answer-item">
                <div class="answer-meta">
                    <div class="content-creator">
                        <img src="https://picsum.photos/100/100?random=84" alt="李性能" class="content-avatar">
                        <div>
                            <span class="creator-name">李性能</span>
                            <div>性能优化专家 @ 咨询公司</div>
                        </div>
                    </div>
                    <div class="text-secondary" style="font-size: 0.9rem;">
                        1天前
                    </div>
                </div>
                
                <div class="answer-content">
                    除了前面提到的优化点，我想补充一些关于React性能监控和分析的方法，因为优化的前提是找到性能瓶颈：<br><br>
                    
                    1. 使用React DevTools的Profiler功能，记录和分析组件渲染情况<br>
                    2. 实现性能监控埋点，收集真实用户的性能数据<br>
                    3. 使用Lighthouse定期审计应用性能<br>
                    4. 关注核心Web指标(Core Web Vitals)：LCP、FID和CLS<br><br>
                    
                    对于状态管理，当应用非常庞大时，考虑使用状态规范化（类似Redux的最佳实践），避免数据冗余和深层嵌套，这可以显著提高更新效率。
                </div>
                
                <div class="answer-actions">
                    <div class="answer-action" id="answer-like-3">
                        <i class="far fa-thumbs-up"></i> 赞同 (15)
                    </div>
                    <div class="answer-action">
                        <i class="far fa-comment"></i> 回复
                    </div>
                    <div class="answer-action">
                        <i class="fas fa-share-alt"></i> 分享
                    </div>
                    <div class="answer-action">
                        <i class="fas fa-flag"></i> 举报
                    </div>
                </div>
            </div>
            
            <!-- 加载更多回答 -->
            <div style="text-align: center; padding: 1rem;">
                <button class="action-btn btn-outline">
                    <i class="fas fa-refresh"></i> 加载更多回答
                </button>
            </div>
        </div>
        
        <!-- 回答输入区域 -->
        <div class="content-card answer-input-section">
            <div class="content-header">
                <div class="answer-input-header">
                    我来回答
                </div>
            </div>
            <div class="content-body">
                <textarea class="answer-textarea" placeholder="分享你的经验和见解..."></textarea>
                
                <div style="margin-bottom: 1rem; font-size: 0.9rem; color: var(--secondary);">
                    <i class="fas fa-info-circle"></i> 回答内容请符合社区规范，禁止广告、人身攻击等违规内容
                </div>
                
                <div class="submit-answer">
                    <button class="action-btn btn-outline" style="margin-right: 1rem;">
                        保存草稿
                    </button>
                    <button class="action-btn btn-primary">
                        <i class="fas fa-paper-plane"></i> 发布回答
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>

        
        // 问题赞同功能
        const likeBtn = document.getElementById('like-btn');
        let questionLiked = false;
        
        likeBtn.addEventListener('click', function() {
            const likeCountEl = this.childNodes[2];
            let likeCount = parseInt(likeCountEl.textContent.match(/\d+/)[0]);
            
            if (questionLiked) {
                // 取消赞同
                likeCount -= 1;
                this.innerHTML = `<i class="far fa-thumbs-up"></i> 赞同 (${likeCount})`;
                showToast('已取消赞同');
            } else {
                // 赞同
                likeCount += 1;
                this.innerHTML = `<i class="fas fa-thumbs-up"></i> 赞同 (${likeCount})`;
                showToast('赞同成功');
            }
            
            questionLiked = !questionLiked;
        });
        
        // 回答赞同功能
        const answerLikeBtns = document.querySelectorAll('[id^="answer-like-"]');
        
        answerLikeBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                if (this.classList.contains('voted')) {
                    // 取消赞同
                    const likeCount = parseInt(this.textContent.match(/\d+/)[0]) - 1;
                    this.innerHTML = `<i class="far fa-thumbs-up"></i> 赞同 (${likeCount})`;
                    this.classList.remove('voted');
                    showToast('已取消赞同');
                } else {
                    // 赞同
                    const likeCount = parseInt(this.textContent.match(/\d+/)[0]) + 1;
                    this.innerHTML = `<i class="fas fa-thumbs-up"></i> 赞同 (${likeCount})`;
                    this.classList.add('voted');
                    showToast('赞同成功');
                }
            });
        });
        
        // 显示/隐藏回复功能
        const showRepliesBtns = document.querySelectorAll('.show-replies');
        
        showRepliesBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                if (this.innerHTML.includes('查看更多') || this.innerHTML.includes('查看全部')) {
                    this.innerHTML = '<i class="fas fa-minus"></i> 收起回复';
                    // 这里可以添加显示更多回复的逻辑
                    showToast('已显示全部回复');
                } else {
                    this.innerHTML = '<i class="fas fa-plus"></i> 查看更多回复';
                    // 这里可以添加收起回复的逻辑
                    showToast('已收起部分回复');
                }
            });
        });
        
        // 回复按钮功能
        const replyBtns = document.querySelectorAll('.answer-action:has(.far.fa-comment)');
        
        replyBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const answerItem = this.closest('.answer-item, .reply-item');
                // 检查是否已有回复框
                let replyInput = answerItem.querySelector('.reply-input');
                
                if (!replyInput) {
                    // 创建回复框
                    replyInput = document.createElement('div');
                    replyInput.className = 'reply-input mt-3';
                    replyInput.innerHTML = `
                        <textarea class="answer-textarea" style="min-height: 100px; font-size: 0.95rem;" placeholder="写下你的回复..."></textarea>
                        <div class="d-flex justify-content-end gap-2">
                            <button class="action-btn btn-outline cancel-reply" style="padding: 0.4rem 0.8rem;">取消</button>
                            <button class="action-btn btn-primary submit-reply" style="padding: 0.4rem 0.8rem;">发布回复</button>
                        </div>
                    `;
                    
                    // 插入到回复区域
                    if (answerItem.classList.contains('answer-item')) {
                        const repliesSection = answerItem.querySelector('.replies-section');
                        repliesSection.parentNode.insertBefore(replyInput, repliesSection);
                    } else {
                        answerItem.appendChild(replyInput);
                    }
                    
                    // 取消回复按钮事件
                    replyInput.querySelector('.cancel-reply').addEventListener('click', function() {
                        replyInput.remove();
                    });
                    
                    // 发布回复按钮事件
                    replyInput.querySelector('.submit-reply').addEventListener('click', function() {
                        const textarea = replyInput.querySelector('textarea');
                        if (textarea.value.trim()) {
                            showToast('回复发布成功');
                            replyInput.remove();
                        } else {
                            showToast('回复内容不能为空');
                        }
                    });
                } else {
                    // 移除已有的回复框
                    replyInput.remove();
                }
            });
        });
        
        // 发布回答按钮事件
        const submitAnswerBtn = document.querySelector('.submit-answer .btn-primary');
        submitAnswerBtn.addEventListener('click', function() {
            const textarea = document.querySelector('.answer-textarea');
            if (textarea.value.trim()) {
                showToast('回答发布成功，等待审核');
                textarea.value = '';
            } else {
                showToast('回答内容不能为空');
            }
        });
    </script>
</body>
</html>
    
